import React from 'react';

import banner from '@/assets/images/profile/GradientBackMobile.png';
import tabBanner from '@/assets/images/profile/tab_premium.jpg';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { Button, ButtonVariants } from '@/shared/ui/Button';
import { Title } from '@/shared/ui/Title';
import Image from 'next/image';
import { useWindowSize } from 'usehooks-ts';

import cs from '../ActionCard.module.scss';
import ccs from './PremiumCard.module.scss';

export const PremiumCard = ({ tab }: { tab?: boolean }) => {
  const { openModal } = React.useContext(ModalContext);

  const { width } = useWindowSize();

  if (tab && width < 1024) {
    return (
      <div className={ccs.tab} onClick={() => openModal(Modals.Subscription)}>
        <Image alt="" className={ccs.tab_banner} src={tabBanner} />
        <Button className={ccs.btn} variant={ButtonVariants.Secondary}>
          <Title size="s">Подробнее о Премиум</Title>
        </Button>
      </div>
    );
  }

  return (
    <div className={cs.floating_card}>
      <Image alt="" className={cs.card_image_float} fill priority quality={100} src={banner} />
      <div className={cs.premium}>
        <Title size="xl" title="Премиум" />
        <p className={cs.text}>
          Подписка откроет все функции <br></br>
          приложения и&nbsp;даст возможность <br></br>
          поддержать companyName
        </p>
        <Button
          className={cs.btn}
          data-testid="button-about"
          onClick={() => openModal(Modals.Subscription)}
          variant={ButtonVariants.Green}
        >
          Подробнее
        </Button>
      </div>
    </div>
  );
};
